<template>
  <div class="app-container">
    <!-- 租金账单详情对话框 -->
    <el-dialog :title="title" v-model="detail" width="800px" append-to-body>
      <!-- 基本信息 -->
      <div class="mb-6">
        <div class="section-title">基本信息</div>
        <el-divider class="my-3" />
        <el-descriptions :column="3" border>
          <el-descriptions-item label="账单编号">
            <span class="font-bold">{{ form.accountNumber || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="账单状态">
            <span class="font-bold">{{ getBillStatusText() }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="房源信息">
            {{ form.address || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="租客姓名">
            {{ form.tenantName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="租客电话">
            {{ formatPhone(form.tenantPhone) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="账单周期">
            {{ getBillingPeriod() }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 金额信息 -->
      <div class="mb-6">
        <div class="section-title">金额信息</div>
        <el-divider class="my-3" />
        <el-descriptions :column="3" border>
          <el-descriptions-item label="应收租金">
            {{ formatMoney(form.tenantRent) }}
          </el-descriptions-item>
          <el-descriptions-item label="实收租金">
            {{ formatMoney(form.actualTenantRent) }}
          </el-descriptions-item>
          <el-descriptions-item label="应收租客管理费">
            {{ formatMoney(form.tenantManagementFee) }}
          </el-descriptions-item>
          <el-descriptions-item label="实收租客管理费">
            {{ formatMoney(form.actualTenantManagementFee) }}
          </el-descriptions-item>
          <el-descriptions-item label="应缴日期">
            {{ form.shouldPaymentDate || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="实缴日期">
            {{ form.receivePaymentDate || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="逾期天数">
            {{ getOverdueDays() }}
          </el-descriptions-item>
          <el-descriptions-item label="收款方式">
            {{ getPaymentTypeDisplayText() }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 业主信息 -->
      <div class="mb-6">
        <div class="section-title">业主信息</div>
        <el-divider class="my-3" />
        <el-descriptions :column="2" border>
          <el-descriptions-item label="业主姓名">
            {{ form.homeownersName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="业主管理费">
            {{ formatMoney(form.homeownersManagementFee) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 凭证 -->
      <div class="mb-6">
        <div class="section-title">凭证</div>
        <el-divider class="my-3" />
        <file-upload 
          v-model="voucherFileList" 
          :disabled="true" 
          :showDownload="true"
          :showTip="false"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelDetail">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.section-title {
  font-size: 14px;
  font-weight: bolder;
  color: #303133;
}

</style>

<script setup name="Transactionaccount">
import { listTransactionaccount, getTransactionaccount, delTransactionaccount, addTransactionaccount, updateTransactionaccount } from "@/api/fang/transactionaccount"
import { toRef, computed } from "vue"
import { parseTime } from "@/utils/ruoyi"
import { convertFenToYuan, getFileObj } from "@/utils/tools"
import { 
  TENANT_PAYMENT_STATUS,
  getTenantPaymentStatusText,
  PAYMENT_TYPE,
  getPaymentTypeText
} from "@/utils/enums"
import FileUpload from '@/components/FileUpload/index.vue'

const { proxy } = getCurrentInstance()

const detail = ref(false)
const title = ref("")

const data = reactive({
  form: {},
})
const form = toRef(data)

// 凭证文件列表（用于 file-upload 组件）
const voucherFileList = computed({
  get: () => {
    if (!form.value.voucherFileList || form.value.voucherFileList.length === 0) {
      return []
    }
    return getFileObj(form.value.voucherFileList)
  },
  set: () => {
    // 只读模式，不需要设置
  }
})

defineExpose({ openDetail })

// 取消按钮
function cancelDetail() {
  detail.value = false
}

// 格式化金额
function formatMoney(amount) {
  if (!amount && amount !== 0) return '¥0.00'
  const yuan = convertFenToYuan(amount)
  return `¥${yuan.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
}

// 格式化手机号（中间四位隐藏）
function formatPhone(phone) {
  if (!phone) return '-'
  if (phone.length === 11) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  }
  return phone
}

// 获取账单状态文本
function getBillStatusText() {
  const status = form.value.actualStatus
  if (status === TENANT_PAYMENT_STATUS.CONFIRMED) {
    return '已收款'
  }
  return getTenantPaymentStatusText(status) || '-'
}

// 获取账单周期
function getBillingPeriod() {
  if (!form.value.ptStartTime || !form.value.ptEndTime) {
    return '-'
  }
  const startTime = parseTime(form.value.ptStartTime, '{y}-{m}-{d}')
  const endTime = parseTime(form.value.ptEndTime, '{y}-{m}-{d}')
  const period = form.value.accountIndex ? ` (第${form.value.accountIndex}期)` : ''
  return `${startTime} ~ ${endTime}${period}`
}

// 获取逾期天数
function getOverdueDays() {
  const overdueDay = form.value.overdueDay
  if (overdueDay > 0) {
    return `${overdueDay}天`
  }
  return '-'
}

// 获取收款方式文本
function getPaymentTypeDisplayText() {
  const paymentType = form.value.paymentType
  if (paymentType === PAYMENT_TYPE.WECHAT) {
    return '微信转账'
  }
  return getPaymentTypeText(paymentType) || '-'
}

function openDetail(dataId) {
  detail.value = true
  title.value = "租金账单详情"

  const _id = dataId
  getTransactionaccount(_id).then(response => {
    form.value = response.data
  })
}
</script>


 